<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>{$data.page_title}</title>
	<link href="css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="css/aui.css"/>
	<link rel="stylesheet" href="css/shop.css">
	<link rel="stylesheet" href="css/alert.css">
	<script src="js/jquery-1.8.2.min.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/init.js"></script>
</head>

<body>
	<header class="mui-bar mui-bar-nav ">
		<a href="index2.html" class="mui-icon-undo mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title" id="page_title">{$data.page_title}</h1>
	</header>

	<div class="mui-content mui-text-center f14">
		<div class="re hidden" style="background:#390300;">
			<img class="block" src="images/bx_bg.jpg" alt="" width="100%">
			<div class="ab zabao">
				<div class="swiper-container">
					<ul class="ab flex swiper-wrapper">
						<li class="swiper-slide"><img src="images/bx_qingtong.png" alt="" width="200"><div><b>青铜宝箱</b></div></li>
						<li class="swiper-slide"><img src="images/bx_baiyin.png" alt="" width="200"><div><b>白银宝箱</b></div></li>
						<li class="swiper-slide"><img src="images/bx_huangjin.png" alt="" width="200"><div><b>黄金宝箱</b></div></li>
					</ul>
					<ul class="swiper-button-next"></ul>
					<ul class="swiper-button-prev"></ul>
				</div>
			</div>
			<img class="left_btn ab" style="left:10vw;top:40vh;" src="images/bx_jiantou.png" alt="">
			<img class="right_btn ab" style="right:10vw;top:40vh;transform:rotate(180deg);" src="images/bx_jiantou.png" alt="">
			<div class="ab aui-col-5 zabao_btn"><img class="vmid aui-mar-r-5" src="images/bx_chuizi.png" alt="" width="18">消耗<span class="inline aui-col-2 ">111</span>积分开启</div>
			<div class="bx_bg re aui-mar-l-5 aui-mar-r-5 aui-pad-10">
				<div class="re aui-pad-10" style="background:#fcc270;">
					<div class="ab bx_btn"><b>中奖名单</b></div>
					<div class="aui-pad-10 f18">本期中奖名单</div>
					<div id="zj_menu" class="zj_menu">
						<ul id="menu1">
							<li class="flex"><div class="f2">小思设计</div><div class="f3">砸中iPhone碎片一个</div></li>
							<li class="flex"><div class="f2">小思设计</div><div class="f3">砸中iPhone碎片一个</div></li>
							<li class="flex"><div class="f2">小思设计</div><div class="f3">砸中iPhone碎片一个</div></li>
							<li class="flex"><div class="f2">小思设计</div><div class="f3">砸中iPhone碎片一个</div></li>
							<li class="flex"><div class="f2">小思设计</div><div class="f3">砸中iPhone碎片一个</div></li>
							<li class="flex"><div class="f2">小思设计</div><div class="f3">砸中iPhone碎片一个</div></li>
						</ul>
						<ul id="menu2"></ul>
					</div>
				</div>
				<div class="re aui-pad-10 aui-mar-t-10" style="background:#fcc270;padding-top:50px;">
					<div class="ab bx_btn"><b>活动规则</b></div>
					<div class="mui-text-left">
						1.完成每日任务可以获得免费抽奖次数，也可以花费积分参与抽奖。<br/>
						2.每个商品集齐100个碎片可以换取相应道具，碎片不能交易和转赠。<br/>
						3.宝箱品质越高就越容易就可以开启获得价值更高的商品，不同宝箱品质开启的价格也不同。
					</div>
				</div>
			</div>

		</div>
	</div>

	<!--alert-->
	<div class="alert none">
		<div class="cishu box re mui-text-center none">
			<div class="tc_btn">提示</div>
			<div>您准备开启几次宝箱？</div>
			<div class="flex aui-pad-t-15 f14" style="justify-content:space-around;"><div class="yici orange_btn">一次</div><div class="shici orange_btn">十次</div></div>
		</div>

		<div class="xiaohao box re mui-text-center none">
			<div class="tc_btn">提示</div>
			<div class="f12 line-height-2">您开启宝箱的次数不足是否使用积分开启?</div>
			<div>消耗 <img src="images/zuan.png" alt="" width="14">100</div>
			<div class="flex aui-pad-t-15 f14" style="justify-content:space-around;"><div class="cancel gray_btn">取消</div><div class="orange_btn">确定</div></div>
		</div>

		<div class="bx_get box mui-text-center re aui-pad-20 re none" style="top:10vh;">
			<img class="ab" style="width:130%;left:-15%;top:-25vh;opacity:0.7;z-index:-1;" src="images/game_light.png" alt="">
			<img class="ab aui-border-rasius-y aui-col-10 auto" style="top:-40px;left:0;right:0;" src="images/bx_succu.png" alt="">
			<div>
				<img src="images/mx_5关.png" alt="" width="60">
				<div>xxxx</div>
				<div class="aui-mar-t-20 f14">
					<div class="cancel gray_btn inline aui-mar-r-10">取消</div>
					<div class="orange_btn inline">确定</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="js/swiper.min.js"></script>
<script>
    // 宝箱切换
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    var oli = $(".zabao ul").find("li");
    var owidth =$(".zabao ul").find("li").width();
    num=0;
    $(".right_btn").click(function(){
        num++;
        if(num>oli.length-1){
            num=0;
            $(".zabao ul").animate({left:0})
        }else{
            $(".zabao ul").animate({left:-owidth*num})
        }
    });
    $(".left_btn").click(function(){
        num--;
        if(num<0){
            num=oli.length-1;
            $(".zabao ul").animate({left:-owidth*num})
        }else{
            $(".zabao ul").animate({left:-owidth*num})
        }
    });

	// 滚动中奖名单
    var	zjbox = document.getElementById('zj_menu');
    var con1 = document.getElementById('menu1');
    var con2 = document.getElementById('menu2');
    // var speed = 50;
    con2.innerHTML=con1.innerHTML;
    zjbox.scrollTop = 0;
    function gund(){
        if(zjbox.scrollTop >= con1.scrollHeight){
            zjbox.scrollTop = 0;
        }else{
            zjbox.scrollTop++;
        }
    }
    var xh=setInterval("gund()",50);
    zjbox.onmouseover=function(){clearInterval(xh);};
    zjbox.onmouseout=function(){setInterval("gund()",50);};


    $(".zabao ul").addEventListener("swiperleft",function(){
       $(this).animate({left:"-100px"})
	});

	$(".zabao_btn").click(function(){
	    $(".alert").show();
	    $(".cishu").show();
	});
	$(".yici").click(function(){
        $(".cishu").hide();
        $(".bx_get").show();
	});
    $(".shici").click(function(){
        $(".cishu").hide();
        $(".xiaohao").show();
    });
	$(".cancel").click(function(){
        $(".alert").hide();
        $(".cishu").hide();
        $(".xiaohao").hide();
        $(".bx_get").hide();
	});
	// var owidth = $(".zabao >ul").find("li:first").width();
	$(".zabao >ul").addEventListener("swiperleft",function(){
	    $(this).animate({left:"-200px"},1000)
	})
</script>
</html>